if (!window.anthill) anthill = {};
if (!window.anthill.layout) anthill.layout = {};

anthill.layout.SPane = function (container, callback) {
	this.container = container;
	this.callback = callback;
};

anthill.layout.SPane.prototype.draw = function (options) {
	/*
	<div id='container'>
		<div id='container_spane_frame' class='anthill_spane_frame'>
			<div id='container_spane' class='anthill_spane'>
			</div>
		</div>
	</div>
	*/
	this.options = (options)?options:{};
	var html = document.createElement('div');
	html.setAttribute('id',this.container.id+'_spane_frame');
	html.setAttribute('class','anthill_spane_frame');
	var cont = document.createElement('div');
	cont.setAttribute('id',this.container.id+'_spane');
	cont.setAttribute('class','anthill_spane');
	/*var overlay = document.createElement('div');
	overlay.setAttribute('id',this.container.id+'_spane_overlay');
	overlay.setAttribute('class', 'anthill_spane_overlay');*/
	if (this.options.style){
		cont.setAttribute('style', this.options.style);
	}
	if (this.options.drag !== false) {
		html.options = this.options;
		html.addEventListener('click', function(event) {
			event.stopPropagation();
			if(this.style.cursor != 'move') {
				var clX = event.clientX;
				var clY = event.clientY;
				this.onmousemove = function(event) {
					if(!this.options.allowXOffLimit && !this.options.allowYOffLimit && !this.options.OffLimit && cont.offsetTop == 0 && cont.offsetLeft == 0 && cont.clientHeight <= this.clientHeight && cont.clientWidth <= this.clientWidth) {
						this.onmousemove = null;
						this.style.cursor = 'auto';
					} else {
						var diffY = (event.clientY-clY);
						var diffX = (event.clientX-clX);
		
						if(this.options.allowYOffLimit || this.options.OffLimit || (diffY > 0 && cont.offsetTop + diffY <= 0) || (diffY < 0 && cont.offsetTop + diffY + cont.clientHeight >= this.clientHeight)) {
							var move;
							if(diffY > 0 && cont.offsetTop + diffY > -10) {
								move = 0;
							} else if (diffY < 0 && cont.offsetTop + diffY + cont.clientHeight < this.clientHeight+10) {
								move = this.clientHeight-cont.clientHeight;
							} else {
								move = cont.offsetTop + diffY;
							}
							cont.style.top = move;
							clY = event.clientY;
						}
		
						if(this.options.allowXOffLimit || this.options.OffLimit || (diffX > 0 && cont.offsetLeft + diffX <= 0) || (diffX < 0 && cont.offsetLeft + diffX + cont.clientWidth >= this.clientWidth)) {
							var move;
							if(diffX > 0 && cont.offsetLeft + diffX > -10) {
								move = 0;
							} else if (diffX < 0 && cont.offsetLeft + diffX + cont.clientWidth < this.clientWidth+10) {
								move = this.clientWidth-cont.clientWidth;
							} else {
								move = cont.offsetLeft + diffX;
							}
							cont.style.left = move;
							clX = event.clientX;
						}
					}
				};
				this.style.cursor = 'move';
			} else {
				this.onmousemove=null;
				this.style.cursor = 'auto';
			}
			/*this.onmouseup = function(event) {
				this.onmousemove=null;
				this.onmouseup=null;
				this.onmouseout=null;
			};*/
			this.onmouseout = function(event) {
				this.onmousemove=null;
				this.onmouseup=null;
				this.onmouseout=null;
				this.style.cursor = 'auto';
			};
		}, false);
	} else {
	/*Calculate background color to use foreground color with better contrast*/
		/*
		if (x.currentStyle)
			var y = x.currentStyle['background-color'];
		else if (window.getComputedStyle)
			var y = document.defaultView.getComputedStyle(x,null).getPropertyValue('background-color');
	
		var re = /rgb\((\d+), (\d+), (\d+)\)/;
		var rgb = re.exec(y);
		var
			r = parseInt(rgb[1], 10),
			g = parseInt(rgb[2], 10),
			b = parseInt(rgb[3], 10);
		var brightness = (r*299 + g*587 + b*114) / 1000;
		if (brightness > 125) {
		// use black
		} else {
		// use white
		}*/
	}
	html.appendChild(cont);
	//html.appendChild(overlay);
	this.container.innerHTML = '';
	this.container.appendChild(html);
	this.callback();
};